Vue.component('book', {
  template: `
    <div>
      <ul>
        <li v-for="book in books" :key="book.id">{{book.title}}</li>
      </ul>
      <div>
        <button @click="handleClick">add a book</button>
      </div>
    </div>
  `,

  props: ['books', 'title'],

  methods: {
    handleClick() {
      const obj = {
        id: new Date().getTime(),
        title: Math.random() * 10000000
      }
      this.books.push(obj)

      this.$emit('new-book', obj)
    }
  },

  mounted() {
    // console.log(this.books)
    // this.books = []
  },
})